<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="130px"
    class="demo-ruleForm"
  >
    <el-form-item label="合作伙伴名称" prop="partnerName">
      <el-input v-model="ruleForm.partnerName"></el-input>
    </el-form-item>

    <el-form-item label="行业" prop="industryId">
      <el-select v-model="ruleForm.industry" placeholder="请选择行业">
        <el-option
          :label="item.industry"
          :value="item.industry"
          v-for="(item, index) in selectList"
          :key="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="logo：" prop="pic">
      <el-upload
        action="http://192.168.31.200:8081/banner/upload"
        list-type="picture-card"
        v-model="ruleForm.pic"
        :file-list="fileList"
        :limit="2"
        :on-success="uploadSuccess"
        :http-request="uploadChange"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>

    <el-form-item label="排序：" prop="sort">
      <el-input v-model="ruleForm.sort"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      <el-button @click="onclick">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data () {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [],
      ruleForm: {
        partnerName: "",
        industryId: "",
        sort: "",
        file: "",
        cooperativeLogo: "",
      },
      selectList: [],
      rules: {
        partnerName: [
          {
            required: true,
            message: "请输入行业合作伙伴名称",
            trigger: "blur",
          }
        ],
        sort: [{ required: true, message: "请输入序号", trigger: "blur" }],
      },
      form: {
        region: "",
      },
    };
  },
  methods: {
    // 初始化编辑页面
    async initForm () {
      this.fileList = []
      let params = this.cooperativeId
      let { data } = await this.$http.getCooperativeDetails(params)
      this.ruleForm = data,
        console.log(data);
      let url = data.cooperativeLogo
      this.fileList.push({ name: 'logo', url: `${url}` })
    },
    // 删除上传图片
    handleRemove (file, fileList) {
      this.fileList = [];
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.selectList.map((item, index) => {
            if (item.industry == this.ruleForm.industry) {
              this.ruleForm.industryId = item.industryId
            }
          })
          this.ruleForm.cooperativeId = this.cooperativeId
          const { meta: { status } } = await this.$http.getEditCooperative(this.ruleForm);
          if (status == 200) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            });
            this.$router.replace({ name: "CooperativePartner" });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload (file) {
      console.log(file);
    },
    async getSelect () {
      let {
        data,
        meta: { status },
      } = await this.$http.getSelectAllIndustry();
      if (status == 200) {
        this.selectList = data.allIndustry;
      }
    },
    async uploadChange (params) {
      const file = new FormData();
      file.append("file", params.file);
      const res = await this.$http.bannerUpload(file);
      return res;
    },
    uploadSuccess (response, file, fileList) {
      this.ruleForm.cooperativeLogo = response;
      this.ruleForm.file = response;
      console.log(response);
      this.fileList = [file]
    },
    onclick () {
      this.$router.replace({ name: "CooperativePartner" });
    },
  },
  created () {
    this.getSelect();
    this.initForm()
  },
  computed: {
    ...mapGetters(['cooperativeId'])
  }
};
</script>

<style scoped lang="less">
.el-input {
  width: 70%;
}
.el-form {
  margin-left: 80px;
  margin-top: 60px;
}
</style>